<style>
  canvas {
    margin: 0 auto;
    border: 2px solid #aaa;
    display: block;
    /*画布居中*/
  }
</style>

<body>
  <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>
  <script>
    // var canvas = document.querySelector("#cont");
    // //获取画布上下文
    // var ctx = canvas.getContext('2d');
    // var w = 500,h = 500,x = 100,y = 100,r = 20;
    // //水平速度
    // var xSpeed = 2;
    // //垂直速度
    // var ySpeed = 3;
    // setInterval(function() {
    //     //清除画布
    //     ctx.clearRect(0, 0, w, h);
    //     //在小球碰到边缘时，速度变为反方向
    //     if (x-r <= 0 || x+r >= w) {
    //         xSpeed = -xSpeed;
    //     }
    //     x += xSpeed;

    //     if (y-r <= 0 || y+r >= h) {
    //         ySpeed = -ySpeed;
    //     }
    //     y += ySpeed;
    //     drawCircle(x, y, r);
    // }, 10);
    // //画圆
    // function drawCircle(x, y, r) {
    //     ctx.beginPath();
    //     ctx.arc(x, y, r, 0, Math.PI*2);
    //     ctx.fillStyle = 'purple';
    //     ctx.fill();
    // }
    //固定的两步
    var canvas = document.querySelector('#cont')
    var ctx = canvas.getContext('2d')
    //画布高度
    var w = h = 500
    var x = 100
    var y = 100
    var r = 20

    //水平速度
    xSpeed = 2
    //垂直速度
    ySpeed = 3

    setInterval(function () {
      //清楚画布
      ctx.clearRect(0, 0, w, h)
      //在小球碰撞到边缘时，速度取相反即可
      if (x - r <= 0 || x + r >= w) {
        xSpeed = -xSpeed
      }
      //到边界时，+负值
      x = x + xSpeed

      if (y - r <= 0 || y + r >= h) {
        ySpeed = -ySpeed
      }
      //到边界时，+负值
      y = y + ySpeed

      drawCircle(x, y, r)
    }, 10)

    function drawCircle (x, y, r) {
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI * 2)
      ctx.fillStyle = 'blue'
      ctx.fill()
    }

  </script>
</body>